<template>
  <div class="login">
    <div class="auto">
      <p class="logo"><img src="/static/images/logo.png" alt="" width="127"></p>
      <div class="content">
        <p class="title">欢迎登录橙新闻后台管理系统</p>
        <div class="input_section">
          <input type="text" placeholder="请输入账号/用户名" v-model="params.userName"
                 @blur="requirePwd"
                 @keyup.enter="login">
          <label id="userName"></label>
        </div>
        <div class="input_section">
          <input type="password" placeholder="请输入密码" autocomplete="new-password"
                 v-model="params.password"
                 @blur="requirePwd"
                 @keyup.enter="login">
          <label id="pwd"></label>
        </div>
        <div class="input_section">
          <el-popover
            placement="top"
            width="430"
            :disabled="this.form.smsCode!=''"
            v-model="popover"
            trigger="click">
            <br>
            <el-form :inline="true" :model="form" :rules="rules" ref="smsCodeForm" class="demo-form-inline">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" style="background-color: #f5a200" @click="getSmsCode">获取验证码</el-button>
              </el-form-item>
            </el-form>
            <input type="text" slot="reference" placeholder="请输入验证码" v-model="params.smsCode"
                   @blur="requirePwd"
                   @keyup.enter="login">
          </el-popover>
          <label id="smsCode"></label>
        </div>
        <button class="login_button" @click="login">登录</button>
      </div>

    </div>
    <p class="bg"><img src="/static/images/bg_03.png" alt=""></p>
    <p class="copyright">橙新闻 版权所有 Copyright©2019 All rights reserved</p>


  </div>

</template>
<script>
  import axios from "axios"
  import {encrypt} from '@/untils/des/DES3'

  export default {
    data() {
      return {
        loading: false,
        formLabelWidth: '120px',
        popover:false,
        dialogFormVisible: false,
        params: {
          userName: "",
          smsCode: '',
          password: ""
        },
        rules: {
          mobile: [
            {required: true, message: '请输入手机号', trigger: 'change'}
          ]
        },
        form: {
          mobile: '',
          smsCode: ''
        },
        loginFont: "登录"
      };
    },
    methods: {
      requireUserName() {
        if (this.params.userName == "") {
          $("#userName").addClass("error").text("请填写用户名");
        } else {
          $("#userName").removeClass("error").text(" ");
        }
      },
      requirePwd() {
        if (this.params.password == "") {
          $("#pwd").addClass("error").text("请填写密码");
          $("#login").css("background", "#ebcd41");
        } else {
          $("#pwd").removeClass("error").text(" ");
          $("#login").css("background", "#fee300");
        }
      },
      requireSmsCode() {
        if (this.params.smsCode == "") {
          $("#smsCode").addClass("error").text("请填写验证码");
          $("#login").css("background", "#ebcd41");
        } else {
          $("#smsCode").removeClass("error").text(" ");
          $("#login").css("background", "#fee300");
        }
      },
      changePwd() {
        $("#pwd").removeClass("error").text("");
      },
      getSmsCode() {

        this.$refs['smsCodeForm'].validate((valid) => {
          if (valid) {
            axios.post('http://localhost:8888/app/common/getSmsCode', {
              areaCode: '+86',
              accountName:this.params.userName,
              mobile: encrypt(this.form.mobile),
              useType: 'LOGIN',
              handlerName: 'sendSMSHandler',
            }).then(res => {
              this.popover=false
              this.form.smsCode = res.data.code;
            })
          }
        });

      },
      login() {
        if (this.params.userName == "" || this.params.password == "" || this.params.smsCode == "") {
          this.requireUserName();
          this.requirePwd();
          this.requireSmsCode();
        } else {
          if (this.params.smsCode != this.form.smsCode) {
            this.errorMessage("验证码不正确!");
            this.requireSmsCode();
            //return;
          }
          this.loading = true;
          this.loginFont = "正在登录...";
          this.$store.dispatch("userLogin", this.params).then(res => {
            if (res.code == "200") {
              this.$store.dispatch("setRouters").then(res => {
                if (res.code == "200") {
                  this.$router.addRoutes(this.$store.state.perms.addRouters);
                  this.$router.push("/welcome");
                  this.loginFont = "登录";
                  this.loading = false;
                } else {
                  this.restInfo();
                }
              }).catch(error => {
                this.restInfo();
              });
            } else if (res.code == "304") {
              this.errorMessage("用户或密码名错误!");
              this.restInfo();
            } else if (res.code == "301") {
              this.errorMessage(res.message + "!");
              this.restInfo();
            } else if (res.code == "209") {
              // this.errorMessage(res.message+"!");
              this.restInfo();
            }
          }).catch(error => {
            this.restInfo();
          });
        }
      },
      restInfo() {
        this.loading = false;
        this.loginFont = "登录";
        this.params.password = "";
      }
    }
  };
</script>

<style scoped lang='scss'>
  @import "../../static/css/login/base.css";
  @import "../../static/css/login/login.css";
</style>

